<template>
  <div class="box">
     <el-button class="backBtn" plain icon="el-icon-arrow-left" @click='backHistory'>返回</el-button>
     <span class="title">{{ newList.detailName }}</span>
     <el-divider class="divider"></el-divider>
     <div v-if="newList.stepMsg" class="step">
          <div v-for="(item,index) in newList.stepMsg" :key="index">
               <div class="outerStep">{{ item.step }}</div>
               <div class="innerStep">
                  <div class="stepTitle">{{ item.stepTitle }}</div>
                  <div class="stepContent" v-html="item.content"></div>
               </div>
         </div>
     </div>
     <div v-if="newList.imgAndMsg" class="imgAndMsg">
      <div v-for="(item,index) in newList.imgAndMsg" :key="index">
        <div class="videoMain" v-if="item.video">
            <span v-if="item.video == 'showVideo'">视频录制中...</span>
            <video v-else :src="item.video" controls="controls" ref="10086" width="100%" height="628">
                您的浏览器不支持 video 标签。
            </video>
        </div>
        <div v-html="item.img"></div>
        <div class="imgAndMsgContent" v-html="item.content"></div>
     </div>
     </div>
  </div>
</template>

<script>
import { Divider } from 'element-ui'
    export default {
        props:{
            detailData:{
                type:Object,
                required: true
            },
           backtempType:{
               type:String,
               required: true
           }
        },
        components:{ ElDivider:Divider },
        data(){
            return {
                newList:[],
            }
        },
        created(){
           this.newList = this.detailData
        },
        watch:{
            detailData( newData , old ){
                this.newList = [...newData]
            }
        },
        methods: {
          backHistory(){
              this.$emit('backHistory',this.backtempType)
          }
        }
    }
</script>

<style lang="stylus" scoped>
.box 
     height 100%
    .divider 
      width: 98%;
      margin 12px 0 20px 0px
   .backBtn
     width: 70px;
     height: 30px;
     padding 0
     font-size 16px
     color rgba(130, 130, 130, 1)
   .title
     font-size 16px
     margin-left 18px
     color rgba(96, 96, 96, 1)
   .step
     .outerStep 
        height: 20px;
        font-size 14px;
        color  rgba(130, 130, 130, 1)
        margin-bottom 6px
     .innerStep
        width: 95%;
        min-height: 134px;
        -webkit-box-shadow: #DCDEE0 0px 0px 10px;  
        -moz-box-shadow: #DCDEE0 0px 0px 10px;  
        box-shadow: #DCDEE0 0px 0px 10px;
        padding 20px
        box-sizing border-box
        margin-bottom 25px
        .stepTitle 
           color #101010
           font-size 14px
           margin-bottom 10px
        .stepContent
           color rgba(128, 128, 128, 1)
           font-size 14px
           line-height 25px
    .imgAndMsg
       .imgAndMsgContent 
           color rgba(115, 116, 115, 1)
           line-height 25px
           font-size 14px
           padding 10px 0 20px 0
           box-sizing border-box
       .videoMain
            width 98%
            height 628px
            background-color #F0F0F0
            display flex
            justify-content center
            align-items center
            color #919191
            font-size 18px
            margin-bottom 5px
</style>
